<template>
  <div>
    <el-skeleton :loading="loading" :rows="5" animated>
      <template #template>
        <el-card>
          <template #header>
            <div>
              <el-skeleton-item variant="h3" style="width: 40%" />
              <el-skeleton-item
                variant="rect"
                style="float: right; width: 1em; height: 1em"
              />
            </div>
          </template>
          <div class="mt-5">
            <el-skeleton-item
              variant="text"
              style="width: 100%"
              v-for="i in 9"
              :key="i"
            />
          </div>
        </el-card>
      </template>
      <template v-if="!loading">
        <el-card :header="title">
          <el-scrollbar :height="scrollHeight">
            <el-descriptions
              :column="column"
              :border="border"
              :label-width="labelWidth"
            >
              <el-descriptions-item
                v-for="item in systemInfo"
                :key="item.label"
                :label="item.label"
              >
                <span :class="valueClass">{{ item.value }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </el-scrollbar>
        </el-card>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup>
// 定义组件props
const props = defineProps({
  // 系统信息数据
  systemInfo: {
    type: Array,
    default: () => [],
    required: true,
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  // 卡片标题
  title: {
    type: String,
    default: '系统信息',
  },
  // 滚动区域高度
  scrollHeight: {
    type: String,
    default: '280px',
  },
  // 描述列表列数
  column: {
    type: Number,
    default: 1,
  },
  // 是否显示边框
  border: {
    type: Boolean,
    default: true,
  },
  // 标签宽度
  labelWidth: {
    type: [String, Number],
    default: '120px',
  },
  // 值的CSS类名
  valueClass: {
    type: String,
    default: 'text-xs',
  },
});

// 定义组件事件
const emit = defineEmits(['refresh']);

// 刷新数据方法
const handleRefresh = () => {
  emit('refresh');
};

// 暴露方法给父组件
defineExpose({
  handleRefresh,
});
</script>

<style lang="scss" scoped>
// 可以添加自定义样式
</style>
